<template>
  <!-- 筛选区 -->
  <div class="sub-filter">
    <div class="item" v-for="item in list" :key="item.id">
      <div class="head">{{ item.name }}：</div>
      <div class="body">
        <a
          href="javascript:;"
          @click="getAttrFn(item, {})"
          :class="{ active: item.activeName === undefined }"
        >
          全部
        </a>
        <a
          href="javascript:;"
          v-for="item2 in item.properties"
          :key="item2.id"
          @click="getAttrFn(item, item2)"
          :class="{ active: item.activeName === item2.name }"
        >
          {{ item2.name }}
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, inject, reactive, toRef } from 'vue'
export default {
  name: 'SubFilter',
  // 🔔 setup 钩子只运行一次
  setup () {
    const subCate = inject('subCate')
    const sortParams = inject('sortParams')
    // console.log(subCate)

    // 💥问题修复：把品牌也定义成响应式数据，否则视图更新不同步
    const brands = reactive({ id: null, name: '品牌', properties: subCate.value.brands })
    // 把后端回来的数据处理成方便前端自己使用的数据结构
    const list = computed(() => {
      // 🔔计算属性内的 subCate 是依赖项，依赖项数据发生变化，computed 会重新计算得到新结果
      return [
        // 品牌 - 后端是独立出来的一个字段，为了列表渲染更加方便，我们把数据合并到属性中
        brands,
        // 保留原来的属性
        ...subCate.value.saleProperties
      ]
    })

    // console.log(list)

    // 当前筛选区需要收集两份数据：1. 商品属性数组  2. 品牌id
    const attrs = toRef(sortParams, 'attrs')
    const brandId = toRef(sortParams, 'brandId')
    // console.log(attrs)
    const getAttrFn = (theItem, theProp) => {
      // 🔔 点击的时候获取属性名称，并通过 :class 绑定实现高亮
      theItem.activeName = theProp.name
      // 🔔 点击品牌的时候，收集的是品牌的id，并且需要存储到一个叫 brandId 的字段中
      if (theItem.name === '品牌') {
        brandId.value = theProp.id
        return
      }
      // console.log(theItem)
      // 点击属性的时候有两种情况：
      const index = attrs.value.findIndex(item => item.groupName === theItem.name)
      // 情况1：当前属性没有被点击过，就添加一份新的属性数据
      if (index === -1) {
        attrs.value.push({ groupName: theItem.name, propertyName: theItem.activeName })
      } else {
        // 情况2：已经有属性字段了，就修改值即可
        attrs.value[index].propertyName = theItem.activeName
      }
      // 🔔过滤去除一些无效值
      attrs.value = attrs.value.filter(item => item.propertyName)
    }

    return { list, getAttrFn }
  }
}
</script>

<style scoped lang="less">
// 筛选区
.sub-filter {
  background: #fff;
  padding: 25px;
  .item {
    display: flex;
    line-height: 40px;
    .head {
      width: 80px;
      color: #999;
    }
    .body {
      flex: 1;
      a {
        margin-right: 36px;
        transition: all 0.3s;
        display: inline-block;
        &.active,
        &:hover {
          color: @xtxColor;
        }
      }
    }
  }
}
</style>
